import React from "react";
import { BrowserRouter, useRoutes } from "react-router-dom";

const Home = React.lazy(() => import("../view/home"));
const Detail = React.lazy(() => import("../view/detail"));
const Pay = React.lazy(() => import("../view/pay"));
const Vip = React.lazy(() => import("../view/vip"));
const Files = React.lazy(() => import("../view/files"));
const My = React.lazy(() => import("../view/my"));

const routes = [
  {
    path: "/",
    element: <Home></Home>,
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
  {
    path: "/pay",
    element: <Pay></Pay>,
  },
  {
    path: "/vip",
    element: <Vip></Vip>,
  },
  {
    path: "/files",
    element: <Files></Files>,
  },
  {
    path: "/my",
    element: <My></My>,
  },
];

const Router = () => {
  const RouterView = () => useRoutes(routes);
  return (
    <BrowserRouter>
      <React.Suspense>
        <RouterView></RouterView>
      </React.Suspense>
    </BrowserRouter>
  );
};

export default Router;
